<template>
  <custom-modal
    v-if="visible"
    :title="$t('view')+$t('supplier')"
    :visible="visible"
    :destroyOnClose="true"
    :keyboard="false"
    :width="900"
    @cancel="()=>{visible=!visible}"
  >
    <template slot="footer">
      <a-button
        type="primary"
        @click.stop="()=>{visible=false}"
      >{{ $t('back') }}</a-button>
    </template>
    <div style="height:500px">
      <s-table
        :columns="columns"
        :rowKey="(record, index) => index"
        :data="modelId?loadData:null"
        :dataSource="supplierList"
        class="h100"
        :showPagination="false"
      >
        <template
          slot-scope="text"
          v-for="column in columns.filter(item => !item.special)"
          :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text||'_'" :key="column.dataIndex"></table-ellipsis>
        </template>
      </s-table>
    </div>

  </custom-modal>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import CustomModal from '@/components/CustomModal/index.vue'
import { supplierViewModalColumns } from '@/views/system/model/config/list'
export default {
  name: 'SupplierViewModal',
  components: { tableEllipsis, STable, CustomModal },
  props: {
    serviceId: {
      type: String,
      default: ''
    },
    serviceCode: {
      type: String,
      default: ''
    },
    modelId: {
      type: String,
      default: ''
    },
    supplierList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      columns: supplierViewModalColumns,
      visible: false,
      tbData: []
    }
  },
  methods: {
    loadData () {
      const vm = this
      const params = { modelId: vm.modelId }
      if (this.serviceId) {
        params.serviceId = vm.serviceId
      }
      if (this.serviceCode) {
        params.serviceCode = vm.serviceCode
      }
      return vm.$api.getServiceModelSupplier(params)
    }
  }
}
</script>
